<template>
	<div class="contentMain">
		<videoPlayer></videoPlayer>
		<div class="reportBoxByHome">
			<div class="lbBox">
				<img class="lbBoxImg" src="./assets/images/laba.png" />
			</div>
			<div class="report">
				{{$store.state.terminfo.reportWordk}}
			</div>
		</div>
		<router-view class="routerView" />
	</div>
</template>

<script>
	import videoPlayer from './components/common/VideoPlayer.vue';
	export default {
		name: "app",
		components: {
			videoPlayer
		},
		data() {
			return {};
		},
		methods: {},
		created() {
		
		},
		mounted() {},
	};
</script>
<style lang="scss">
	@media (min-height: 1919px) {
		.vdiv {
			/* width: 400px;
		    height: 400px; */
			/* margin: 0 auto; */
			position: relative;
			top: 0px;
			left: calc((100vw-1080px)/2);
			width: 1080px;
			height: 1000px;
			z-index: 20;
		}

		.contentMain {
			height: 1920px;
			width: 100%;
			max-width: 1080px;
			max-height: 1920px;
			margin: 0 auto;
			overflow-x: hidden;
		}

		.contentCp {
			height: 920px !important;
			width: 1080px;
			top: 0px;
			z-index: 2;
			position: relative;
		}

		.contentsByTop {
			position: fixed;
			top: 1000px;
			width: 100%;
			max-width: 1080px;
			background-color: #FFFFFF;
			z-index: 2;
		}

		.addChose {
			position: relative;
			top: 55px;
		}

		.loadingDiv {
			height: 920px;
			width: 1080px;
			top: 1000px;
			position: fixed;
			z-index: 0;
		}

		.el-row-verticalLow {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			position: relative;
			top: 0vh;
		}

		.header-wrap {
			position: relative;
			top: 0px;
			width: 92%;
			padding: 0rem 4%;
			padding-top: 2rem;
			display: flex;
			background-color: #EAF4F9;
			overflow: hidden;
			z-index: 2;
			justify-content: space-between;
		}

		.isShowBox {
			position: fixed;
			width: 530px;
			padding-bottom: 60px;
			background: #FFFFFF;
			bottom: 250px;
			left: calc(50% - 265px);
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
		}

		.reportBoxByHome {
			display: none;
		}

		.el-row-vertical {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			height: calc(100% - 280px);
			position: relative;
		}

		.el-main {
			padding-top: 0px !important;
		}



		.bttomBox {
			height: 100%;
			width: 100%;
			top: 0px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			/* flex-wrap: wrap; */
		}

	}

	@media (min-height: 0px) and (max-height: 1910px) {

		.el-row-vertical {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			position: relative;
		}

		// 主框架
		.routerView {
			height: calc(100% - 80px);
			width: 100%;
		}

		.vdiv {
			display: none;
		}

		.contentMain {
			height: 100%;
			width: 100%;
			margin: 0 auto;
			overflow-x: hidden;
		}

		.contentCp {
			height: calc(100% - 46px);
			width: 100%;
			top: 0px;
			z-index: 2;
			position: relative;
		}

		.contentsByTop {
			position: relative;
			width: 100%;
			background-color: #FFFFFF;
			z-index: 2;
		}

		.addChose {
			position: relative;
			top: 19px;
		}

		.loadingDiv {
			height: 100%;
			width: 100%;
			top: 0px;
			position: fixed;
			z-index: 0;
		}

		.el-row-verticalLow {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0;
			position: relative;
			top: 0vh;
			height: calc(100% - 280px);
		}

		.header-wrap {
			position: relative;
			top: 0px;
			width: 92%;
			padding-top: 2rem;
			display: flex;
			background-color: #EAF4F9;
			overflow: hidden;
			z-index: 2;
			justify-content: space-between;
		}

		.isShowBox {
			position: fixed;
			width: 530px;
			padding-bottom: 60px;
			background: #FFFFFF;
			top: calc(50% - 190px);
			left: calc(50% - 265px);
			z-index: 3;
			text-align: center;
			box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
			border-radius: 6px;
		}

		.reportBoxByHome {
			height: 80px;
			display: flex;
			background-color: #FFFFFF;
			position: relative;

			.lbBox {
				padding-left: 53px;
				padding-right: 23px;
				height: 80px;
				z-index: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #FFFFFF;

				.lbBoxImg {
					width: 35px;
					height: 31px;
				}
			}

			.report {
				display: flex;
				justify-content: center;
				align-content: center;
				font-size: 38px;
				font-family: Source Han Sans CN;
				font-weight: 300;
				color: #FA9E58;
				text-align: left;
				cursor: pointer;
				display: inline-block;
				font-weight: bold;
				white-space: nowrap;
				animation: 15s wordsLoop linear infinite normal;
				z-index: 1;
				line-height: 80px;
				padding-left: 100%;
			}
		}




		.bttomBox {
			height: 100%;
			width: 100%;

		}



	}

	.el-main {
		display: flex !important;
	}

	.BtnTextHome {
		text-align: center !important;
		font-size: 32px !important;
		margin-left: 20px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #FFFFFF !important;
		background: #57A8FF;
		border-radius: 6px !important;
		width: 132px !important;
		height: 70px !important;
	}

	.BtnTextGreen {
		text-align: center !important;
		font-size: 32px !important;
		margin-left: 20px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #FFFFFF !important;
		background: #46C349;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09) !important;
		border-radius: 6px !important;
		width: 132px !important;
		height: 70px !important;
	}







	.el-icon-loading {
		font-size: 54px;
	}

	.el-dialog {
		position: fixed !important;
		left: 50%;
		transform: translate3d(-50%, 0, 0);
		bottom: 5%;
	}

	.flex {
		display: flex;
	}

	.red {
		color: #FE5F5F;
	}

	.hui {
		color: #A1ADBB;
	}

	.deepHui {
		color: #435C7A;
	}

	.yiny {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}

	.flex1 {
		flex: 1;
	}

	.flex2 {
		flex: 2;
	}

	.center {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.white {
		color: #FFFFFF;
	}

	.bottomBox {
		position: fixed;
		bottom: 30px;
		left: 30px;
		display: flex;
		width: calc(100% - 60px);
		align-items: center;
		height: 100px;

		.pageBox {
			margin-left: 10px;
			margin-right: 10px;
			display: flex;
			font-size: 3.5vw;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #435C7A;
			/*实现垂直居中*/
			align-items: center;

			.curentPage {
				padding-left: 10px;
			}
		}
	}

	.bacGreen {
		background: #46C349;
	}

	.blueBottom {
		text-align: center !important;
		font-size: 32px !important;
		margin-left: 20px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #FFFFFF !important;
		background: #57A8FF !important;
		border-radius: 6px !important;
		width: 132px !important;
		height: 70px !important;
		display: flex;
		/*实现垂直居中*/
		align-items: center;
	}

	.greenBottom {
		width: 132px;
		height: 70px;
		background: #46C349;
		;
		color: #FFFFFF;
		border-radius: 6px;
		display: flex;
		/*实现垂直居中*/
		align-items: center;
	}

	.huiBottom {
		text-align: center !important;
		font-size: 32px !important;
		margin-left: 20px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #FFFFFF !important;
		background: #657B83 !important;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09) !important;
		border-radius: 6px !important;
		width: 132px !important;
		height: 70px !important;
		display: flex;
		/*实现垂直居中*/
		align-items: center;
	}

	.speciBtn {
		margin-top: 30px;
	}

	.BtnText {
		text-align: center;
		width: 100%;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
	}

	::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 7px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		background-color: #CFDAE0;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		border-radius: 10px;
		background: none;
		border: none;
	}

	tbody .cell {
		text-align: center;
		padding: 8px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: 400;
		line-height: 36px !important;
	}

	thead .cell {
		text-align: center;
		padding: 15px 0px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 800;
		color: #435C7A;
	}

	.table {
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 8px;
		width: 100%;
		font-size: 28px !important;
		font-weight: 400;
		text-align: center;
	}

	.el-card {
		border-radius: 8px !important;
	}

	.el-icon-loading {
		animation: none !important;

	}

	.el-icon-loading:before {
		content: url(assets/images/common/loading.gif) !important;
	}

	.el-loading-text {
		font-size: 24px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		color: #435C7A !important;
	}

	.el-button {
		border: none !important;
	}

	.upPage {
		// margin-left: 0px !important;
	}

	.pageBox {
		margin-left: 10px;
		margin-right: 10px;
		display: flex;
		font-size: 3.5vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		/*实现垂直居中*/
		align-items: center;
	}

	.box-custom-center {
		vertical-align: -550px;
	}

	.tipBox {
		position: fixed;
		top: 1400px;
		left: 0px;
		width: 100%;
		z-index: 3;
	}

	.tipText {
		background-color: #FFFFFF;
		padding: 15px 70px;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
	}

	.spaceBetweenFlex {
		display: flex;
		justify-content: space-between;
	}

	@media (min-height: 1919px) {
		.needBigBox .el-row-vertical {
			height: calc(100% - 208px);
		}
	}


	@media (min-height: 0px) and (max-height: 1910px) {
		.needBigBox .el-row-vertical {
			height: calc(100% - 228px);
		}
	}
</style>
